<template>
  <div class="box">
    <!-- X图标 -->
    <div class="revomlogo">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- logo -->
    <div class="iconfontlogo">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 输入框 -->
    <Inputapp
      type="text"
      textplaceholder="请输入用户名/手机号码"
      rule="^\d{5,11}$"
      err_message="请输入正确的账号"
      @valnewVal="setusername"
    />
    <Inputapp
      type="password"
      textplaceholder="请输入用户密码"
      rule="^.{3,9}$"
      err_message="请输入正确的密码"
      @valnewVal="setuserpassword"
    />
    <!-- 登录按钮 -->
    <loginapp text="点我登录吧~" @clicked="login" />
  </div>
</template>

<script>
import Inputapp from "@/components/inputApp";
import loginapp from "@/components/loginBut";
export default {
  dtat() {
    return {
      username: "",
      userpassword: ""
    };
  },
  components: {
    Inputapp,
    loginapp
  },
  methods: {
    login() {
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.username,
          password: this.userpassword
        }
      }).then(res => {
        const { message, data } = res.data;
        console.log(res.data);
        if (message == "登录成功") {
          localStorage.setItem("token", data.token);
          localStorage.setItem("id", data.user.id);
          this.$toast.success(message);
          this.$router.push("/");
        } else {
          this.$toast.fail(message);
        }
      });
    },
    setusername(username) {
      this.username = username;
    },
    setuserpassword(userpassword) {
      this.userpassword = userpassword;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-top: 20px;
  // X图标
  .revomlogo {
    // X图标
    .iconicon-test {
      font-size: 25px;
      margin-left: 20px;
      color: skyblue;
    }
  }

  //logo
  .iconfontlogo {
    text-align: center;
    .iconnew {
      font-size: 69.444vw;
      background-image: -webkit-linear-gradient(
        bottom,
        rgb(211, 7, 7),
        #d4b3f3,
        rgb(66, 202, 193)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>